<script setup>
import BaseLargeTitle from '../BaseLargeTitle.vue';

const props = defineProps({
  name: String,
  phoneNumber: String,
  email: String,
});
</script>

<template>
  <div class="h-ch w-cw rounded-2xl p-6 shadow-default cursor-pointer hover:scale-105 transition-transform">
    <BaseLargeTitle>{{ name }}</BaseLargeTitle>
    <div class="flex flex-col gap-3 mt-6">
      <div class="flex gap-14px">
        <img src="./img/phone.svg" alt="phone-icon" />
        <p class="text-sm text-text-secondary">{{ phoneNumber }}</p>
      </div>
      <div class="flex gap-14px">
        <img src="./img/mail.svg" alt="mail-icon" />
        <p class="text-sm text-text-secondary">{{ email }}</p>
      </div>
    </div>
  </div>
</template>
